<template>
  <div
    class="structureMul block"
    :class="chooseResult.length > 0 && !dialogVisible ? 'structureMulNan' : ''"
  >
    <el-button type="text" @click="dialogVisible = true">+选择部门</el-button>

    <el-dialog
      title="选择部门"
      :visible.sync="dialogVisible"
      width="50%"
      :append-to-body="true"
      custom-class="topBlock"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="flexrow box">
        <div class="blockL">
          <p>您已选择：</p>
          <div class="flexrow chooseResultView">
            <div
              class="item"
              v-for="(item, index) in chooseResult"
              :key="index"
            >
              <el-tag closable type="info" @close="clearChoose(index)">
                {{ item.name }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="blockR" v-loading="loading">
          <el-tree
            :data="dataTree"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :default-checked-keys="chooseArr"
            :props="defaultProps"
            @check-change="handleCheckChange"
          >
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doneChoose">确 定</el-button>
      </span>
    </el-dialog>
    <div
      class="flexrow block_reshow"
      v-if="chooseResult && chooseResult.length > 0"
    >
      <div style="max-width: 98%; overflow: hidden; display: flex">
        <span
          style="
            font-size: 12px;
            margin-right: 10px;
            display: block;
            white-space: nowrap;
            color: #d9ecfe;
          "
          v-for="(item, index) in chooseResult"
          :key="index"
          >{{ item.name }}</span
        >
      </div>
      <i
        class="el-icon-circle-close"
        style="margin-left: 10px;  cursor: pointer;"
        @click="delChoose()"
      ></i>
    </div>
  </div>
</template>
<script type="text/javascript">
import { depListAPI } from "@/api/common";
import XhStructure from "./XhStructure";
import ArrayMixin from "./ArrayMixin";

export default {
  name: "XhStructureCellMul", // 新建 structure-cell-mul
  components: {
    XhStructure,
  },
  mixins: [ArrayMixin],
  props: {
    /** 包含数据源 */
    item: Object,
    curVal: Array
  },
  data() {
    return {
      dialogVisible: false, // 展示popover
      defaultProps: {
        children: "children",
        label: "label",
      },
      dataTree: [],
      loading: false,
      chooseResult: [],
      chooseArr:[]
    };
  },
  computed: {},
  watch: {
    curVal(val){
      this.initCur()
    }
  },
  created() {
    this.getTree();
  },
  mounted() {
    this.initCur();
  },
  methods: {
    initCur(){
      if(this.curVal&&this.curVal.length>0){
        this.chooseResult = this.curVal;
        let arr = [];
        this.chooseResult.forEach(item=>{
          arr.push(item.id)
        })
        this.chooseArr = arr;
      }
    },
    //选中触发
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
      this.chooseResult = this.$refs.tree.getCheckedNodes();
    },
    //渲染树形组件
    getTree() {
      this.loading = true;
      let params = {
        type: "new_tree",
      };
      depListAPI(params)
        .then((res) => {
          const allList = res.data;
          this.dataTree = allList;

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //结果反推
    clearChoose(idx) {
      this.chooseResult.splice(idx, 1);
      this.$refs.tree.setCheckedNodes(this.chooseResult);
    },
    //点击确定
    doneChoose() {
      this.dialogVisible = false;
      // console.log("valuec");
      this.$emit("valueChange", {
        value: this.$refs.tree.getCheckedKeys(),
        valueContent: this.chooseResult,
        item: this.item,
      });
    },
    //清空选中
    delChoose() {
      this.chooseResult = [];
      if (this.$refs.tree) this.$refs.tree.setCheckedNodes(this.chooseResult);
      this.$emit("valueChange", {
        value: [],
        valueContent: [],
        arr: [],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.block {
  position: relative;
  .block_reshow {
    position: absolute;
    width: 85vw;
    align-items: center;
    background: #4482ff;
    padding: 12px 0 12px 5px;
    margin-top: 10px;
    border-radius: 4px;
    left: -5vw;
    // left: -60%;
    // left: calc(0% - 3px);
  }
}
/deep/.topBlock {
  z-index: 9999;
}
.box {
  padding: 20px;
  height: 500px;
}
.flexrow {
  display: flex;
  flex-direction: row;
  align-items: normal !important;
}
.blockL {
  width: 30%;
  padding-right: 20px;
  border-right: 1px solid #eee;
  overflow-y: scroll;
}
.blockR {
  width: 70%;
  overflow-y: scroll;
}
.chooseResultView {
  flex-wrap: wrap;
  .item {
    margin: 10px 10px 0 0;
  }
}
</style>
